<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root{
            width: 600px;
            height: 400px;
            background: red;
            border:20px dashed green;
        }
    </style>
</head>
<body>
    <button>增加</button>
    <button>获取</button>
    <button>移除</button>
    <hr/>
    <div data-username="wangwu" data-age="100" id="root"></div>
</body>
<script>
    const btns = document.querySelectorAll("button");
    const div = document.querySelector("#root");
    let hobby = "study";
    btns[0].onclick = function(){
        // 1-
        div.setAttribute("data-num",90);
        // 2- 推荐
        div.dataset.my = "wangwu";
        // 3- 推荐
        div.dataset["a"] = 80;
        div.dataset[hobby]="学习"
    }
    btns[1].onclick = function(){
        console.log("username",div.getAttribute("data-username"));// wangwu
        console.log("age",typeof (div.dataset.age/1));// 100
    }
    btns[2].onclick = function(){
        div.removeAttribute("data-username");
        delete div.dataset.age;
    }
</script>
</html>